<html>
 <head>
  <meta charset="utf-8">
  <title>{ms:global.name/}</title>
  <meta http-equiv="content-type" content="text/html">
  <meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
  <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width">
  <meta name="format-detection" content="telephone=no">
  <meta name="app-mobile-web-app-capable" content="yes">
  <meta name="app-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="keywords" content="{ms:global.keyword/}">
  <meta name="description" content="{ms:global.descrip/}">
  <script type="text/javascript" src="{ms:global.host/}/static/plugins/vue/2.6.9/vue.min.js"></script>
  <link rel="stylesheet" href="{ms:global.host/}/static/plugins/minireset/0.0.2/minireset.min.css">
  <link rel="stylesheet" href="https://cdn.mingsoft.net/iconfont/iconfont.css">
  <link rel="stylesheet" href="{ms:global.host/}/static/plugins/animate/4.1.0/animate.min.css">
  <script src="{ms:global.host/}/static/plugins/element-ui/2.12.0/index.js"></script>
  <link rel="stylesheet" href="{ms:global.host/}/static/plugins/element-ui/2.12.0/index.css">
  <link rel="stylesheet" href="{ms:global.host/}/{ms:global.style/}/css/app.css">
  <!--网络请求框架-->
  <script src="{ms:global.host/}/static/plugins/axios/0.18.0/axios.min.js"></script>
  <script src="{ms:global.host/}/static/plugins/qs/6.6.0/qs.min.js"></script>
  <script src="{ms:global.host/}/static/plugins/ms/1.0.0/ms.js"></script>
  <script src="{ms:global.host/}/static/plugins/ms/1.0.0/ms.http.js"></script>
  <script src="{ms:global.host/}/static/plugins/ms/1.0.0/ms.util.js"></script>
  <script>
        ms.base = "";
    </script>
  <style>
        [v-cloak]{
            display: none;
        }
    </style>
 </head>
 <body>
  <div id="app" v-cloak>
   <#include "nav.htm" />
   <div class="news">
    <div class="body">
     <div class="left">
     {ms:channel type='parent'}
     <span class="title"> ${field.typetitle}</span>
     {/ms:channel}
     <#assign typetitle=field.typetitle>
     <#if field.typeleaf>
     {ms:channel type='level'}
     <a href="{ms:global.url/}${field.typelink}" class="<#if typetitle==field.typetitle>sub-title-sel<#else>sub-title</#if>"> ${field.typetitle} </a>
     {/ms:channel}
     <#else>
     {ms:channel type='son'}
     <a href="{ms:global.url/}${field.typelink}" class="<#if typetitle==field.typetitle>sub-title-sel<#else>sub-title</#if>"> ${field.typetitle} </a>
     {/ms:channel}
    </#if>
    </div>
     <div class="right">
      <div class="ms-channel-path">
       <span class="ms-channel-path-label"> 当前位置： </span>
       <a href="/" class="ms-channel-path-index"> 首页 </a> {ms:channel type="path"}
       <i class="iconfont icon-youjiantou"></i>
       <a href="{ms:global.url/}${field.typelink}" class="ms-channel-path-link"> ${field.typetitle} </a> {/ms:channel}
      </div>
      <div class="right-body">
       {ms:arclist size=10 ispaging=true}
       <div class="news-item">
        <div class="pic">
         <img title="" alt="" src="{ms:global.host/}/{@ms:file field.litpic/}">
        </div>
        <div class="news-content">
         <a href="{ms:global.url/}${field.link}" class="title"> ${field.title} </a>
         <span class="desc"> ${field.descrip} </span>
         <div class="news-footer">
          <span class="label"> 发布时间 </span>
          <span class="v"> ${field.date?string("yyyy-MM-dd")} </span>
         </div>
        </div>
       </div>
       {/ms:arclist}

      </div>

      <div class="page">
       <el-pagination
               background
               @current-change="handleCurrentChange"
               :page-size="pageSize"
               :current-page.sync="pageCur"
               layout="prev, pager, next, jumper"
               :total="contentCount"> </el-pagination>

      </div>

     </div>



    </div>
   </div>
   <#include "footer.htm" />
  </div>
  <script>
var app = new Vue({
    el: '#app',
    watch:{
    },
    data: {
     //当前页数
     pageCur: ${(page.cur)!1},
     //每页文章条数
     pageSize: ${(page.size)!20},
     //页数总数
     pageTotal: ${(page.total)!0},
     //内容总数
     contentCount: ${(page.rcount)!0}
    },
    methods: {
     switchShow:function(arr){
      var that = this
      arr.forEach(function(x){
       let e = that.$el.querySelector("#key_"+x)
       if(e){
        e.style.display=e.style.display=='none'?'flex':'none'
       }
      })
     },
     handleCurrentChange:function(val) {
      if(val==1) {
       location.href = "{ms:global.url/}/${field.categoryPath}/index.html";
      } else {
       location.href = "{ms:global.url/}/${field.categoryPath}/list-" + val + ".html";
      }
     }
    },
    created(){
    }
})
</script>
  <style>
    body {
        background-color:#fff;
        box-sizing:border-box;
        font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Segoe UI", "Helvetica Neue", "PingFang SC", "Noto Sans", "Noto Sans CJK SC", "Microsoft YaHei", 微软雅黑, sans-serif;
        moz-box-sizing:border-box;
        webkit-box-sizing:border-box;
    }

    .news
    {
            align-items:center;
            flex-direction:row;
            display:flex;
            padding-right:0px;
            box-sizing:border-box;
            justify-content:center;
            padding-bottom:0px;
            flex-wrap:nowrap;
            width:100%;
            margin-bottom:0px;
            padding-top:0px;
            padding-left:0px;
            margin-top:0px;
    }
    .news .body
    {
            padding-bottom:20px;
            flex-wrap:nowrap;
            flex-direction:row;
            display:flex;
            padding-right:0px;
            width:1200%;
            box-sizing:border-box;
            padding-top:20px;
            padding-left:0px;
            justify-content:center;
            height:100%;
    }
    .news .body .left
    {
            padding-bottom:0px;
            flex-wrap:nowrap;
            flex-direction:column;
            display:flex;
            padding-right:0px;
            width:200px;
            box-sizing:border-box;
            padding-top:0px;
            padding-left:0px;
            margin-top:0px;
            height:100%;
    }
    .news .body .left .title
    {
            border-bottom-color:#C0C4CC;
            color:#C0C4CC;
            flex-direction:row;
            word-wrap:break-word;
            display:inline-block;
            font-size:16PX;
            border-bottom-style:dashed;
            padding-top:10px;
            border-bottom-width:1px;
            padding-left:10px;
            margin-top:0px;
            height:40px;
    }
    .news .body .left .sub-title-sel
    {
            background-color:#F2F6FC;
            color:#409EFF;
            flex-direction:row;
            word-wrap:break-word;
            display:inline-block;
            font-size:16PX;
            padding-top:10px;
            padding-left:10px;
            margin-top:2px;
            height:40px;
    }
    .news .body .left .sub-title
    {
     color:#5F5F5F;
     flex-direction:row;
     word-wrap:break-word;
     display:inline-block;
     font-size:16PX;
     padding-top:10px;
     padding-left:10px;
     margin-top:0px;
     height:40px;
    }
    .news .body .right
    {
            padding-bottom:0px;
            flex-wrap:nowrap;
            flex-direction:column;
            display:flex;
            padding-right:0px;
            width:1000px;
            margin-bottom:0px;
            box-sizing:border-box;
            padding-top:0px;
            padding-left:20px;
            margin-top:0px;
            height:100%;
    }

    .news .body .right .page {
     padding-right: 0px;
     padding-bottom: 0px;
     flex-wrap: nowrap;
     height: 60px;
     align-items: center;
     justify-content: center;
     padding-left: 0px;
     box-sizing: border-box;
     padding-top: 0px;
     flex-direction: row;
     display: flex;
     width: 100%;
    }
    .news .body .right .ms-channel-path
    {
            align-items:center;
            flex-direction:row;
            display:flex;
            padding-right:0px;
            box-sizing:border-box;
            margin-left:auto;
            margin-right:auto;
            padding-bottom:0px;
            flex-wrap:nowrap;
            width:100%;
            margin-bottom:10px;
            padding-top:0px;
            padding-left:0px;
            margin-top:10px;
            height:30px;
    }
    .news .body .right .ms-channel-path span
    {
            color:#909399;
            flex-direction:row;
            word-wrap:break-word;
            display:inline-block;
            font-size:16PX;
    }
    .news .body .right .ms-channel-path .ms-channel-path-index
    {
            cursor:pointer;
            color:#000;
            font-size:16PX;
            text-decoration:none;
            margin-bottom:0px;
            margin-top:0px;
    }
    .news .body .right .ms-channel-path >i
    {
    }
    .news .body .right .ms-channel-path .ms-channel-path-link
    {
            cursor:pointer;
            color:#000;
            font-size:16PX;
            text-decoration:none;
            margin-bottom:0px;
            margin-top:0px;
    }
    .news .body .right .right-body
    {
            align-items:flex-start;
            flex-direction:column;
            display:flex;
            padding-right:10px;
            box-sizing:border-box;
            margin-left:0px;
            margin-right:0px;
            padding-bottom:10px;
            width:100%;
            margin-bottom:0px;
            padding-top:10px;
            padding-left:10px;
            margin-top:0px;
            height:100%;
    }
    .news .body .right .right-body .news-item
    {
            padding-bottom:0px;
            flex-wrap:nowrap;
            flex-direction:row;
            display:flex;
            padding-right:0px;
            width:100%;
            box-sizing:border-box;
            margin-bottom:10px;
            padding-top:0px;
            padding-left:0px;
            margin-top:0px;
            height:120px;
    }
    .news .body .right .right-body .news-item .pic
    {
            padding-bottom:0px;
            flex-wrap:nowrap;
            flex-direction:row;
            display:flex;
            width:200px;
            box-sizing:border-box;
            padding-top:0px;
            height:120px;
    }
    .news .body .right .right-body .news-item .pic img
    {
            margin-right:0px;
            padding-bottom:0px;
            padding-right:0px;
            width:100%;
            margin-bottom:0px;
            padding-top:0px;
            padding-left:0px;
            height:100%;
            margin-left:0px;
    }
    .news .body .right .right-body .news-item .news-content
    {
            padding-bottom:0px;
            flex-wrap:nowrap;
            flex-direction:column;
            display:flex;
            padding-right:0px;
            width:100%;
            box-sizing:border-box;
            padding-top:0px;
            position:relative;
            padding-left:10px;
            justify-content:flex-start;
            height:100%;
    }
    .news .body .right .right-body .news-item .news-content .title
    {
            padding-bottom:0px;
            flex-direction:row;
            word-wrap:break-word;
            display:inline-block;
            font-size:18PX;
            padding-top:0px;
            padding-left:0px;
    }
    .news .body .right .right-body .news-item .news-content .desc
    {
            padding-bottom:8px;
            color:#909399;
            flex-direction:row;
            word-wrap:break-word;
            display:inline-block;
            padding-right:0px;
            font-size:16PX;
            margin-bottom:0px;
            padding-top:8px;
            padding-left:0px;
            height:100px;
    }
    .news .body .right .right-body .news-item .news-content .news-footer
    {
            align-items:center;
            flex-direction:row;
            display:flex;
            padding-right:0px;
            box-sizing:border-box;
            justify-content:flex-start;
            margin-left:0px;
            margin-right:0px;
            padding-bottom:0px;
            flex-wrap:nowrap;
            width:100%;
            margin-bottom:0px;
            padding-top:0px;
            padding-left:0px;
            height:30%;
    }
    .news .body .right .right-body .news-item .news-content .news-footer .label
    {
            margin-right:0px;
            padding-bottom:0px;
            color:#C0C4CC;
            flex-direction:row;
            word-wrap:break-word;
            display:inline-block;
            padding-right:0px;
            font-size:14PX;
            margin-bottom:0px;
            padding-top:0px;
            padding-left:0px;
            margin-left:0px;
    }
    .news .body .right .right-body .news-item .news-content .news-footer .v
    {
            margin-right:10px;
            padding-bottom:0px;
            color:#C0C4CC;
            flex-direction:row;
            word-wrap:break-word;
            display:inline-block;
            padding-right:0px;
            font-size:14PX;
            margin-bottom:0px;
            padding-top:0px;
            padding-left:0px;
            margin-left:10px;
    }
@media (max-width: 768px){
        .news
        {
                align-items:center;
                flex-direction:row;
                display:flex;
                padding-right:0px;
                box-sizing:border-box;
                justify-content:center;
                padding-bottom:0px;
                flex-wrap:nowrap;
                width:100%;
                margin-bottom:0px;
                padding-top:0px;
                padding-left:0px;
                margin-top:0px;
        }
        .news .body
        {
                padding-bottom:20px;
                align-items:center;
                flex-wrap:nowrap;
                flex-direction:column;
                display:flex;
                padding-right:0px;
                width:100%;
                box-sizing:border-box;
                padding-top:20px;
                padding-left:0px;
                justify-content:flex-start;
        }
 .news .body .left {
  width: 90%;
 }
        .news .body .right
        {
                padding-bottom:0px;
                flex-wrap:nowrap;
                flex-direction:column;
                display:flex;
                padding-right:0px;
                width:100%;
                margin-bottom:0px;
                box-sizing:border-box;
                padding-top:0px;
                padding-left:0px;
                margin-top:0px;
        }
        .news .body .right .ms-channel-path
        {
                align-items:center;
                flex-direction:row;
                display:flex;
                padding-right:0px;
                box-sizing:border-box;
                margin-left:auto;
                margin-right:auto;
                padding-bottom:0px;
                flex-wrap:nowrap;
                width:90%;
                margin-bottom:10px;
                padding-top:0px;
                padding-left:0px;
                margin-top:10px;
                height:30px;
        }
        .news .body .right .ms-channel-path span
        {
                color:#909399;
                flex-direction:row;
                word-wrap:break-word;
                display:inline-block;
                font-size:16PX;
        }
        .news .body .right .ms-channel-path .ms-channel-path-index
        {
                cursor:pointer;
                color:#000;
                font-size:16PX;
                text-decoration:none;
                margin-bottom:0px;
                margin-top:0px;
        }
        .news .body .right .ms-channel-path .ms-channel-path-link
        {
                cursor:pointer;
                color:#000;
                font-size:16PX;
                text-decoration:none;
                margin-bottom:0px;
                margin-top:0px;
        }
        .news .body .right .right-body
        {
                align-items:center;
                flex-direction:column;
                display:flex;
                padding-right:0px;
                box-sizing:border-box;
                justify-content:center;
                margin-left:0px;
                margin-right:0px;
                padding-bottom:10px;
                width:100%;
                margin-bottom:0px;
                padding-top:10px;
                padding-left:0px;
                margin-top:0px;
                height:100%;
        }
        .news .body .right .right-body .news-item
        {
                padding-bottom:0px;
                flex-wrap:nowrap;
                flex-direction:column;
                display:flex;
                padding-right:0px;
                width:90%;
                box-sizing:border-box;
                margin-bottom:10px;
                padding-top:0px;
                padding-left:0px;
         height: unset;
        }
        .news .body .right .right-body .news-item .pic
        {
                padding-bottom:0px;
                flex-wrap:nowrap;
                flex-direction:row;
                display:flex;
                width:100%;
                box-sizing:border-box;
                margin-bottom:0px;
                padding-top:0px;
                height:unset;
        }
        .news .body .right .right-body .news-item .pic img
        {
                padding-bottom:0px;
                padding-right:0px;
                width:100%;
                padding-top:0px;
                padding-left:0px;
                height:100%;
        }
        .news .body .right .right-body .news-item .news-content
        {
                padding-bottom:0px;
                flex-wrap:nowrap;
                flex-direction:column;
                display:flex;
                padding-right:0px;
                width:100%;
                box-sizing:border-box;
                padding-top:0px;
                position:relative;
                padding-left:0px;
                justify-content:flex-start;
                height:100%;
        }
        .news .body .right .right-body .news-item .news-content .title
        {
                padding-bottom:0px;
                text-align:left;
                flex-direction:row;
                word-wrap:break-word;
                display:inline-block;
                font-size:16PX;
                margin-bottom:8px;
                padding-top:0px;
                padding-left:0px;
                margin-top:8px;
        }
        .news .body .right .right-body .news-item .news-content .desc
        {
                padding-bottom:8px;
                color:#909399;
                flex-direction:row;
                word-wrap:break-word;
                display:inline-block;
                padding-right:0px;
                font-size:14PX;
                margin-bottom:0px;
                padding-top:8px;
                padding-left:0px;
                margin-top:0px;
                height:100px;
         display: none;
        }
        .news .body .right .right-body .news-item .news-content .news-footer
        {
                align-items:center;
                flex-direction:row;
                display:flex;
                padding-right:0px;
                box-sizing:border-box;
                justify-content:flex-start;
                margin-left:0px;
                margin-right:0px;
                padding-bottom:0px;
                flex-wrap:nowrap;
                width:100%;
                padding-top:0px;
                padding-left:0px;
                height:30%;
        }
        .news .body .right .right-body .news-item .news-content .news-footer .label
        {
                margin-right:0px;
                padding-bottom:0px;
                color:#C0C4CC;
                flex-direction:row;
                word-wrap:break-word;
                display:inline-block;
                padding-right:0px;
                font-size:14PX;
                margin-bottom:0px;
                padding-top:0px;
                padding-left:0px;
                margin-left:0px;
        }
        .news .body .right .right-body .news-item .news-content .news-footer .v
        {
                margin-right:10px;
                padding-bottom:0px;
                color:#C0C4CC;
                flex-direction:row;
                word-wrap:break-word;
                display:inline-block;
                padding-right:0px;
                font-size:14PX;
                margin-bottom:0px;
                padding-top:0px;
                padding-left:0px;
                margin-left:10px;
        }

}</style>
 </body>
</html>